/*
 * @Description: 单个列表数据组件
 * @Author: buwei.huang
 * @Date: 2019-06-17 15:19:24
 * @Last Modified by: buwei.huang
 * @Last Modified time: 2019-06-17 15:20:47
 */
<template>
  <div class="search_list_item">
    <div class="labelName">
      {{typeValue.labelName}}
    </div>
    <!-- 列表数据 -->
    <div class="list">
      <div
        class="item flex-h flex-vc"
        :class="type == 3 ? 'itemHeight' : ''"
        v-for="(item,index) in listData"
        :key=index
        @click="goSearchDetail(item)"
      >
        <i
          class="iconfont"
          :class="item.type == '1' || item.type == '2' ? 'icon-bus' : item.type == '3' ? 'icon-station' : 'icon-place'"
        />
        <div class="flex-v flex-hc itemInfo">
          <span>{{item.name}}</span>
          <span
            v-if="item.type != '1' && item.type != '3'"
            class="spanFont"
          >{{item.address}}</span>
        </div>
      </div>
    </div>
    <!-- 清除历史数据 -->
    <div
      v-if="type == 0"
      class="buttonfont_history"
      @click="clearHistory"
    >
      {{typeValue.buttonText}}
    </div>
    <!-- 显示更多 -->
    <div
      v-if="type != 0 && more"
      class="buttonfont"
      @click="goMoreList"
    >
      {{typeValue.buttonText}}
    </div>
  </div>
</template>
<script>
import { saveHistory, removeStorage } from '../utils/Storage.js'
import { goToStationDetails, goToSearchCar, goToLine, goToHere } from '@/utils/RouteTableUtils.js'
export default {
  props: {
    type: {
      type: Number,
      default: 1 // 1为线路，2为车站，3为位置 0为历史记录
    },
    listData: {
      type: Array,
      default: null
    },
    more: {
      type: Boolean,
      default: false
    },
    GPSinfo: {
      type: Object,
      default: null
    }
  },
  computed: {
    typeValue() {
      switch (this.type) {
        case 1:
          return { labelName: '线路', buttonText: '查看更多线路' }
        case 2:
          return { labelName: '车站', buttonText: '查看更多线路' }
        case 3:
          return { labelName: '位置', buttonText: '查看更多位置' }
        case 0:
          return { labelName: '搜索历史', buttonText: '清除历史记录' }
        default:
          return { labelName: '线路', buttonText: '查看更多线路' }
      }
    }
  },
  methods: {
    // 跳转更多页面
    goMoreList() {
      let paramsStr = 'type=' + this.type + '&searchText=' + this.$store.getters.searchText
      goToSearchCar(paramsStr)
    },
    // 列表详情跳转
    goSearchDetail(item) {
      let paramsStr =
        item.type === 1 || item.type === 2
          ? 'BUS_DIRECTION=1&NAME=' + item.name +
          '&ID=' + item.id
          : 'NAME=' + item.name +
          '&ID=' + item.id +
          '&START_LOACTION_LNG=' + item.longitude +
          '&START_LOACTION_LAT=' + item.latitude
      if (item.type === 3) {
        // 站点下线路
        goToStationDetails(paramsStr)
      } else if (item.type === 1 || item.type === 2) {
        goToLine(paramsStr)
        console.log('goLine~~~')
      } else {
        console.log('go高德~~~', this.GPSinfo)
        if (this.GPSinfo.add) {
          let paramsStr = encodeURI(
            'START_ADRESS=' + this.GPSinfo.add +
            '&START_LOACTION_LNG=' + this.GPSinfo.longitude +
            '&START_LOACTION_LAT=' + this.GPSinfo.latitude +
            '&END_ADRESS=' + item.name +
            '&END_LOACTION_LNG=' + item.longitude +
            '&END_LOACTION_LAT=' + item.latitude
          )
          goToHere(paramsStr)
        } else {
          let endPlace = {
            name: item.name,
            lng: item.location.lng,
            lat: item.location.lat
          }
          endPlace = encodeURIComponent(JSON.stringify(endPlace))
          console.log('endPlace~~~~', endPlace)
          goToHere('endPlace=' + endPlace)
        }
      }
      // 历史记录储存
      let saveHistoryItem = {
        img_class: 'icon-station',
        url: item.type === 1 || item.type === 2
          ? window.busPathVue + '/SearchCar.html?bus_direction=1&' + paramsStr
          : window.busPathVue + '/SearchCar.html?' + paramsStr,
        latitude: item.longitude ? item.longitude : 0,
        longitude: item.longitude ? item.longitude : 0,
        ...item
      }
      saveHistory(saveHistoryItem)
    },
    // 清空搜索历史
    clearHistory() {
      this.$UI.then(UI => {
        UI.showDialog(
          '清空确认',
          '您确认要清空搜索历史吗?',
          '确认',
          '取消',
          msg => {
            if (msg == 0) { //eslint-disable-line
              removeStorage('searchData').then(res => {
                if (res) {
                  this.$emit('clearHistory')
                }
              })
            }
          },
          function (msg) { }
        )
      })
    }
  }
}
</script>

<style>
.search_list_item {
  padding-top: 10px;
}
.search_list_item .labelName {
  font-size: 12px; /* no */
  color: rgba(153, 153, 153, 1);
  line-height: 33px;
  padding: 16px 0 15px 30px;
}
.search_list_item .list {
  padding-left: 40px;
  background-color: #fff;
}
.search_list_item .item {
  height: 100px;
}
.search_list_item .itemHeight {
  height: 120px;
}
.search_list_item .iconfont {
  color: #999999;
  font-size: 14px; /* no */
}
.search_list_item .item span {
  color: #333333;
  font-size: 14px; /* no */
  line-height: 40px;
  margin-left: 30px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search_list_item .item .spanFont {
  color: #999999;
}
.search_list_item .item .itemInfo {
  width: calc(100% - 28px - 40px);
}
.search_list_item .buttonfont_history {
  color: #999999;
  font-size: 14px; /* no */
  line-height: 100px;
  text-align: center;
  background-color: #fff;
  height: 100px;
}
.search_list_item .buttonfont {
  color: #999999;
  background-color: #fff;
  font-size: 12px; /* no */
  line-height: 100px;
  padding-left: 45px;
  height: 100px;
}
</style>
